<template>
  <div>
    <div>
      <!--      <el-date-picker placeholder="开始时间" style="margin-right: 15px" v-model="startdate">大幅度发</el-date-picker>-->
      <!--      <el-date-picker placeholder="结束时间" style="margin-right: 15px" model="enddate">大幅度发</el-date-picker>-->
      <!--      <el-input placeholder="时间间隔" style="margin-right: 15px; width: 200px"></el-input>-->
      <div class="block" style="margin: 10px 0">

        <el-date-picker style="width: 500px; margin-right: 20px"
                        v-model="value_date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-select style="width: 500px; margin-right: 20px" v-model="m_val" multiple placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="s_val" placeholder="请选择" style=" margin-right: 20px">
          <el-option
              v-for="item in options_single"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="jh" style="width: 200px; margin-right: 20px" placeholder="井号"></el-input>
        <el-button type="primary" @click="getdata">查询</el-button>
      </div>

    </div>
    <div id="father">

      <div v-for="item in m_val" :id="item"
           style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;"></div>
      <!--      <div id="slave" style="display: block; width: 1600px; height: 300px; background-color: #42b983"></div>-->
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import service from "@/utils/request";
import ElementUI from "element-ui";
import {formatDateTime} from '@/utils/formatDateTime'

export default {
  data() {
    return {
      chart_option: {
        // 用dataset设置
        dataset: {
          // dimensions: [{name: 'empno', type: 'number' }, {name: 'ename' },{name: 'job' },{name: 'mgr' },{name: 'hiredate' },{name: 'sal',type: 'number' }],
          // dimensions: [ 'empno', 'ename' , 'job' ,'mgr', 'hiredate','sal', 'comm', 'deptno'],
          source: [
            // ['2020-02-01 10:10:10',100],
            // ['2020-02-01 10:12:10',20],
          ]

        },
        xAxis: {
          type: 'time',
          name: '采集时间',
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
          }

        },
        yAxis: {
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{value}Mpa',
          }
        },


        series: [
          {
            type: 'bar',
            encode: {
              x: 'cjsj',
              y: 'jkYy'
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          // {
          //   type: 'line',
          //   encode: {
          //     x: 'cjsj',
          //     y: 'jkYy'
          //   },
          //   label: {
          //     show: false,
          //   },
          //   emphasis: {
          //     label: {
          //       show: true
          //     }
          //   }
          // }
        ]
      },
      options_single: [{
        value: '1',
        label: '1分钟'
      }, {
        value: '5',
        label: '5分钟'
      }, {
        value: '30',
        label: '30分钟'
      }, {
        value: '60',
        label: '1小时'
      }, {
        value: '120',
        label: '2小时'
      }],

      options: [{
        value: 'yy',
        label: '油压'
      }, {
        value: 'ty',
        label: '套压'
      }, {
        value: 'wd',
        label: '温度'
      }, {
        value: 'zh',
        label: '载荷'
      }, {
        value: 'yl',
        label: '液量'
      }],
      m_val: ['yy', 'ty'],
      s_val: '1',
      jh: '',
      user: 'master',
      startdate: new Date(),
      enddate: new Date(),
      value_date: [formatDateTime(new Date(),'yyyy-MM-dd HH:mm:ss'),formatDateTime(new Date(),'yyyy-MM-dd HH:mm:ss')],
      // interval: 1
    }

  },
  methods: {
    //次函数根据选项显示相应的图表，如油压，套压，温度等等
    showChart() {
      // console.log('showChart')
      this.m_val.forEach(v => {
        console.log(v)
        var chartDom = document.getElementById(v);
        echarts.dispose(chartDom)
        var myChart = echarts.init(chartDom);
        // chart_option
        if (v === 'yy') {//显示油压图表
          this.chart_option.yAxis.name = '油压'
          this.chart_option.yAxis.axisLabel.formatter = '{value}Mpa'
          this.chart_option.series[0].encode =
              {
                x: 'cjsj', y: 'jkYy'
              }
          // this.chart_option.series[1].encode =
          //     {
          //       x: 'cjsj', y: 'jkWd'
          //     }
        } else if (v === 'ty') {//显示套压图表
          this.chart_option.yAxis.name = '套压'
          this.chart_option.yAxis.axisLabel.formatter = '{value}Mpa'
          this.chart_option.series[0].encode =
              {
                x: 'cjsj', y: 'jkTy'
              }
        } else if (v === 'wd') {//显示温度图表
          this.chart_option.yAxis.name = '温度'
          this.chart_option.yAxis.axisLabel.formatter = '{value}^C'
          this.chart_option.series[0].encode =
              {
                x: 'cjsj', y: 'jkWd'
              }
        }

        myChart.setOption(this.chart_option);
      })
    },
    getdata() {

      service({
        url: '/yjss/list',
        method: 'get',
        params: {
          startdate: this.value_date[0],
          enddate: this.value_date[1],
          interval: this.s_val,
          jh: this.jh
        },
        // data: {
        //   xxx: 1,
        // }
      }).then(response => {
        if(response.data.code !== 20000){
          ElementUI.Message({
            message: response.data.message,
            type: 'warning'
          })
          return;
        }
        this.chart_option.dataset.source = response.data.data
        // console.log(response)
        // console.log(this.chart_option.dataset.source)
        //处理655.35值,将高于100mpa的值替换为'_'
        if(response.data.data === null)
          return;
        response.data.data.forEach(v => {
          if(v.jkYy > 100){
            v.jkYy = '_'
          }
          if(v.jkTy > 100){
            v.jkTy = '_'
          }
        })
        // myChart.setOption(this.chart_option);
        this.showChart()
      }, error => {
        ElementUI.Message({
          message: error.message,
          type: 'error'
        })
      })


      // console.log(option)

    }

  }

}


</script>

<style scoped>

</style>